<template>
  <div>
    <!-- 如果想要监听表格滚动，必须要有高度 -->
    <el-table
      ref="table"
      :data="list"
      border
      style="width: 100%"
      height="600"
      @row-click="handleRowClick"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="index" label="索引" width="80"></el-table-column>
      <el-table-column prop="time" label="日期" width="180"></el-table-column>
      <el-table-column prop="username" label="姓名" width="180"></el-table-column>
      <el-table-column prop="content" label="内容"></el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <!-- 会返回点击的name和行数据 -->
          <action-buttons
            :actions="actionList"
            :item="scope.row"
            @action-click="handleActionClick"
          ></action-buttons>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import ActionButtons from '@/views/components/ActionButtons.vue';

export default {
  name: 'TableView',
  components: {
    ActionButtons,
  },
  data() {
    return {
      finished: false,
      loading: false,
      list: [],
      actionList: [
        { name: 'detail', label: '详情', iconClass: 'el-icon-document', effect: 'dark' },
        { name: 'edit', label: '修改', iconClass: 'el-icon-edit', effect: 'dark' },
        { name: 'delete', label: '删除', iconClass: 'el-icon-delete', effect: 'dark' },
      ],
    };
  },
  mounted() {
    this.getDataList();
    // 监听table 滚动条
    let tableBodyDom = this.$refs.table.bodyWrapper;
    tableBodyDom.addEventListener('scroll', () => {
      // 滚动条总高度 减去 窗口高度 减去 已卷入的高度 小于 50px 就加载新数据
      if (tableBodyDom.scrollHeight - tableBodyDom.clientHeight - tableBodyDom.scrollTop < 50) {
        // 一定要给事件一个节流限制。不然会执行很多次
        if (!this.finished && !this.loading) {
          this.getDataList();
        }
      }
    });
  },
  methods: {
    // 获取数据
    getDataList() {
      this.loading = true;
      // 使用axios获取mock的模拟数据
      this.$axios
        .post('/api/tables/list')
        .then(res => {
          const { code, data } = res.data;
          if (code === 200 && data) {
            this.list = [...this.list, ...data];
            // 为每条数据添加一个索引号
            this.list.forEach((item, index) => {
              item.index = index + 1; // 索引号从1开始
            });
            this.loading = false; // 加载状态结束
          }
          if (this.list.length >= 100) {
            this.finished = true; // 数据全部加载完毕
          }
        })
        .catch(err => {
          console.log(`调用失败：${err}`);
        });
    },
    // 勾选
    handleRowClick(row, column, event) {
      if (column.label !== '操作') {
        this.$refs.table.toggleRowSelection(row);
      }
    },
    // 点击操作列进行操作
    handleActionClick(actionName, row) {
      // 处理操作按钮点击事件
      if (actionName === 'delete') {
        this.$confirm('确认要删除该行吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            this.list = this.list.filter(item => item.id !== row.id);
          })
          .catch(() => {
            // 取消删除操作
          });
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>
